<template>
  <div class="middel">
    <ul class="zuan" v-for="item in list" :key="item.id">
      <li>
        <img :src="item.scene_pic_url" alt="" />
        <p class="p1">{{ item.title }}</p>
        <p class="p2">{{ item.subtitle }}</p>
        <p class="p3">￥{{ item.price_info.toFixed(2) }}元起</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { GetZuanData } from "@/request/api";
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    GetZuanData()
      .then(res => {
        // console.log(res.data.data);
        this.list = res.data.data;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
 
<style lang = "less" scoped>
.zuan {
  li {
    width: 100%;
    background-color: #fff;
    padding-bottom: 0.066667rem;
    margin-bottom: 0.2rem;
    img {
      width: 100%;
    }
    p {
      text-align: center;
      margin: 0.266667rem;
    }
    .p1 {
      font-size: 0.16rem;
    }
    .p2 {
      color: rgb(99, 99, 99);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .p3 {
      color: brown;
    }
  }
}
</style>